Lo apliqué hace unos días en las entradas, lo descubrí en mis visitas a Vaganbundia y me pareció de gran utilidad.
J.Miur explica con lujo de detalles como hacerlo y como de costumbre nos regala una explicación para entender el funcionamiento.
El efecto subir a inicio se consigue añadiendo Prototype, y Scriptaculous dos librerías JavaScript y una tercera con las que podemos conseguir efectos fantásticos effects.js
Uno de ellos es añadir un efecto deslizamiento para ir a inicio desde cualquier entrada con un simple click.

Si encontráis problemas para la descarga podéis probar la descarga aquí es el zip con los tres archivos necesarios prototype.js, scriptaculous.js y effects.js una vez descargado abrimos el zip y extraemos los archivos que más tarde alojaremos en un servidor externo Google Pagges por ejemplo.

Una vez alojados los tres archivos nos ubicamos en plantilla edición de HTML y los añadimos antes de </head> de la siguiente forma.

<script src='URL-nuestro-archivo-prototype.js' type='text/javascript'/>
<script src='URL-nuestro-archivo-scriptaculous.js?load=effects' type='text/javascript'/>

En el primer scripts incluimos prototype.js en el segundo estamos incluyendo scriptaculous.js y el añadido ?load=effects para dar la orden a scriptaculous.js de que use effects.js

Si preferimos olvidarnos de buscar alojamiento de archivos podemos utilizar el scripts que Google proporciona para Prototype y Scriptaculous, es el siguiente:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Una vez añadidos los archivos en la plantilla nos ubicaremos antes de </head> y añadiremos lo siguiente:

<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element)
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
//]]>
</script>


Usar el efecto es muy sencillo donde deseamos que aparezca añadiremos:
<a href="#elNombre">ENLACE</a>

Donde ENLACE podemos poner un texto o una imagen, o los dos si lo deseamos


J.Miur nos explica que lo más sencillo es reemplazar elNombre por el ID de algún DIV de la plantilla. Por ejemplo, para ir al inicio de una página, podríamos poner:

<a href="#Blog1">ENLACE</a>


o bien

<a href="#outer-wrapper">ENLACE</a>

Si deseamos ir al final de la página sustituimos href="#outer-wrapper" y en su lugar añadimos href="#footer-wrapper" podemos ir a las etiquetas de la sidebar si añadimos href="#Label1"

Ya tenemos todo lo necesario para poder añadir el efecto deslizante, sólo nos falta decidir donde aplicarlo.
Para que apareciera en el footer de las entradas yo lo añadí marcando para expandir la plantilla de artilugios y situándome justo antes de :
<p class='post-footer-line post-footer-line-2'>

Es bueno recordar que:
<p class='post-footer-line post-footer-line-1'>
Contiene los datos de autor.

<p class='post-footer-line post-footer-line-2'>

Contiene las etiquetas.


<p class='post-footer-line post-footer-line-3'>

Suele emplearse para añadir marcadores sociales, entradas relacionadas y algún que otro complemento.

En una actualización J.Miur nos informa que si utilizamos en nuestra plantilla enlaces tipo <a herf="#"> puede ocasionar problemas con los efectos si eso ocurriera podemos eliminarlo y utilizar el mismo enlace para los efectos de forma que para ir a inicio añadiríamos:

<a
onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false' href="#outer-wrapper">
TEXTO / IMAGEN
</a>


Ver entrada original de Vagabundia.


Fernando

Gema de hecho te iba a preguntar como se hace ese efecto.
Ya baje el archivo donde dices:

"Si encontráis problemas para la descarga podéis probar la descarga aquí"


Ahora en Google Pagges me pierdo ya q no tengo idea de como se usa.
Al lado derecho de la pantalla tengo un rectángulo para subir el archivo y luego?

Podrías explicar el procedimiento de Google Pagges?
Ya que una vez ahí no tengo idea de que hacer.
Gracias

Responder
TodoGospel by Rachel

Hola Gem@:
Estaba mirando el rincón de amigos y encuentro un error en mi nombre no soy Yanqee soy YAQUEE, por favor si podés corregirlo .... GRACIAS!! y como siempre este blog es de mucaha ayuda para mi y he mejorado bastante mis blogs gracias a vos. Chau!! desde Argentina

Responder
Rain

Hola, graciasd nuevamente por darle continuidad y calidez a tu valioso blog.

Por favor, tengo un impasse con el template: en IExplorer se ven desconfigurados los acentos y las eñes. ¿Podrías decirme donde radica el error porque quiero conservar el template? En Firefox no hay problemas. Sólo que es operativo que el template se vea bien por Explorer. te lo enviaré por mail, para que te sea mejor moverlo. Entretatno creo que lo cambiaré temporalmente.

Gracias miles poor la atención.

Responder
La Blogueria

Estos efectos me gustan tanto que me la paso haciendo clic cada vez que me encuentro con uno. De verdad. Me quedo pillada mirando como sube y baja el scroll.

Abrazos Gema!

Responder
Emmanuel Joven

hola queria preguntar si se puede cambiar (mas bien como) lo de entradas antiguas por unas imagesnes porfavor contestame...
y si me agrgas no pasa nada XD

Responder
Gem@

Hola Fernando en esta entrada hablo de la necesidad de alojar nuestros archivos en un servidor propio. En la misma entrada encontrarás un link a Vagabundia que amablemente como siempre se prestó a crear un tutorial sobre Google Page.


Lamento el error Princesa YANQUEE :(

Espero tus noticias Rain.

Pues ya sabes La Bloguería son todo tuyos puedes pasera todo lo que gustes jajajaja

Saludos Emmanuel creo qu ete refieres a iconos de navegación !Suerte¡

Responder
paqui

Hola Gem@, voy aestudiar esto de ir a inicio.
Pasate por mi bolg en el te he dejado un regalo, feliz finde..

Responder
Anónimo

Gema, en mi blog: Bloggermaniacos te he dejado un regalo yo también.
http://bloggerbetamaniacos.blogspot.com/2008/02/premio-arte-y-pico-desde-blogeriana.html

Saludos.

Responder
Fernando

Gema no entiendo donde dices
"Usar el efecto es muy sencillo donde deseamos que aparezca añadiremos":

Donde pongo ese codigo? de ahi n adelante me estanco.
Que hago?

Responder
Fernando

Donde dice enlace voy a poner la dirección de mi blog? y en donde dice nombre voy a poner lo q yo quiera q aparezca?

Responder
Fernando

Ya me confundi.
Los 2 primeros códigos son antes de /head> verdad?

despues expando los afrtilujios y pongo el ultimo código?

Responder
Gem@

Hola Paqui muchas gracias amiga te lo agradezco de corazón ;)

Gracias Jenny es todo un detalle de tu parte, lo añadiré a mi sidebar ;)

Fernando: "Usar el efecto es muy sencillo donde deseamos que aparezca..." hablo del efecto por supuesto, es lo que tratamos de añadir ;)
Hay una parte del post que dice donde aplicarlo según donde deseamos que aparezca el enlace para el efecto.
Esta donde dice: "Ya tenemos todo lo necesario para poder añadir el efecto deslizante, sólo nos falta decidir donde aplicarlo....."

Donde dice "ENLACE" es el texto o la imagen que veremos y que da opción a clicar para producir el efecto.

En "elNombre" pondremos el ID de algún DIV de la plantilla.

#outer-wrapper para ir a inicio.

#footer-wrapper para ir al final del blog.

#Label1 para ir a las etiquetas de la sidebar.

Lee detenidamente la entrada y hazlo paso a paso sin omitir nada es la única forma que de buen resultado. De todas formas en Vagabundia encontrarás más información yo lo que hice fue resumir la forma de aplicar el efecto.

Responder
Fernando

Gema quiero poner el efecto justo al lado de "publicado por etc al lado derecho de la pantalla justo como lo tienes tu
Ya q se ve mejor asi
no crees?
Ya he puesto el codigo donde estan los lados del ahutor arriba abajo pero no aparece del lado derecho donde lo pongo?

Responder
hasbarah

Me salió excelente el "problemita" es que me queda la manito que apunta para arriba (el dibujo) del lado izquierdo abajo del post y quedaría más prolijo todo "alineado" del lado derecho. Hay alguna forma de cambiarlo. Yo le puse un texto enoooorme para que se corra, jeje! Sino no había forma!!!
Perdón por cargosear Gem@ y desde ya te agradezco muchísimo.
Gaby

Responder
Gem@

Prueba de este modo:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>
<img src='url-de-la-imagen'/> IR A INICIO
</a>

Responder
Anónimo

Listo Gem@, aunque hay te va la palabra más cruel del castellano... PERO,:D, subí los .js a skydrive pero cuando verifica si el efecto se aplico no cargaba la página porque se quedaba un rato cargando la dirección es pecíficamente de scriptacoluousss (uy) así que usé el que pones adicionalmente que ofrece google, ¿será que skydrive tenía un problemita o hice algo mal? porque me fijé bien en la url y no había nada malo (creo) y ¿se puede determinar la velocidad de la subida?

Responder
Anónimo

esta es la del .js de scriptacoluooouuuss http://i8psag.bay.livefilestore.com/y1pqtfM_SEjcyAYaTEhp3VZ8SNYpS6tLhZZyZpb2Gs-lxGZh8EeSEBmpPjPjBtScu-U4-t-JdfIeRwHtnIU-6ANrA/scriptaculous.js y cuando hablo de velocidad de subidad no es de conexion sino del efecto jijjiji;)

Responder
Gem@

Hasta donde yo sé la velocidad es según el espacio que hay entre inicio y el fotter que es donde está la imagen. A mayor espacio velocidad más lenta :)

Responder
Anónimo

:O, jajaja no entendí, jajaja, pero no importa tengo una pregunta más y una duda

Problema: Mi imagen de cabecera en IE se ve hacia un lado ¿crees que tenga algún error en la plantilla? por que en Firefox se vé centrada:(.

Pregunta; tu eres española ¿no?, ¿que hora es allá? :D

Gracias por tu ayuda, eres tan rápida al responder que esto parece un chat

Responder
Gem@

Sobre determinar la velocidad no sé si puede hacerse, pienso que la velocidad va en relación con el espacio que hay entre la cabecera del blog y el final, a mayor número de entradas en la página principal más espacio y más lento será el efecto.
La mejor opción sin duda es el script que proporciona Google, también está la posibilidad que Sky Drive tuviera problemas cuando probabas.

Intenta no dar tanto margen al lad oizquierdo de la imagen para que se centre.
Puedes haerlo en

.header .widget {
width: 800px;
height: 181px;
margin-left: 45px;
border: 2px solid #CAB602;
}

Y si, soy española aquí ya es madrugada 02´15 hora de ir a dormir :)

Responder
Anónimo

Mil gracias y un beso, a dormir, me hace sentir culpable el horario :((, jajaja no lo olvidaré

Responder
Jazziturno

¡Gema! Estoy sembrando tus entradas de dudas :P

¡Me encanta este script! Pero creo que me pasa lo mismo que a Luis. No es que vaya rápido... jajaja, es que no hace la función scroll, no sé por qué... Me lleva directamente arriba.

Como bien dices, pensaba que era por el espacio que recorre desde abajo hasta arriba. Así que probé en otro Blog, y puse que la pantalla principal se abriese con 30 entradas, así que la opción de scroll era enooorme jajaja, pero nada, me lanza arriba como un rayo.

No es que haya más o menos velocidad, es que me envía arriba directamente. Si quieres ver el ejemplo, aquí mi blog: http://reporteropeyote.blogspot.com

¡Gracias Cielo!

Responder
Jazziturno

Aún no lo inauguré, estoy probando cosas que veo aquí, las entradas en columnas me va a venir genial, así que gracias una y otra vez.

Muack.

Responder
Reportero Peyote

¡Ya solucioné esto también! Era que me mandaba directamente a:

http://reporteropeyote.blogspot.com/#outer-wrapper

¡Gracias! Lamento llenarte esto, de verdad que busco soluciones por todas partes antes de escribir, pero es que da la casualidad de que las encuentro justo después jajajaja.

Eso, te aviso de que ya me salió :)

Ah, y eso, que lo del recorrido da lo mismo, hace el scroll igual, y queda taaan bonito.

¡Otro beso!

Jazziturno

Responder
Gem@

Jazziturno jajajaja no importa que llenes esto lo importante es que encuentres las soluciones ¡no me da tiempo a ayudarte! jajajajaja
Por cierto me encanta como está quedando, muy propio el diseño, elegante, y las imágenes de las entradas y sidebar son una pasada ¡eres genial!

Responder
Admin

Bueno creo que finalmente voy a probar esto con el script de Google así no tengo que alojar ninguna librería, pruebo y después te cuento a ver si me sale y no me crea conflicto con nada.
Es que soy tan conflictiva :D la plantilla ja ja

Otra vez no puedo comentar en el otro formulario, hayyy Blogger... grrr

Responder
Admin

Hayy gem@ me sale pero en el footer de las entradas, y a la izquierda, no como lo tenés vos, me sale repetido en cada entrada, no queda flotando al costado derecho, que hice mallll???? :'(

Responder
Admin

Me está ayudando Pizcos via Twitter y logré ponelo pero me lleva abajo en lugar de arriba me quiero matarrrrr

Responder
Gem@

k_nelita pon outer-wrapper eso te lleva a inicio.

Responder
Admin

Muchas gracias gem@, sabés que yo copié le código tal cual está en esta entrada incluso la última parte donde dices que JMiur actualizó a ese código que dice auter-wrapper y todo lo demás, lo copié así como está aquí, pero vaya a saber una porque no salió, o si Blogger me borró esa parte, decía outer-wrapper dos veces y tal cual copié y pegué pero no salió, ahora lo corregí y si me salió, cosas raras si las hay... :S

Pizcos me ayudaba desde Twitter como te dije, porque no sabía en donde colocarlo, vos decís en la linea h2, pero ahí me quedaba dentro del footer de los post, una flecha en cada post, me fijé en tu código fuente y lo tenés en la linea h4, pero yo no tengo h4, o no pude encontrarla por ningún lado, :o y el me dijo cuando vió que me estaba volviendo loca :D que no me hiciera problema y lo pusiera dentro de un elemento html, y así lo hice y fue cuando desapreció lo de outer-wrapper :O

Ahora ya está, mil gracias!
Ayer lo abandoné porque tenía que salir, el fin de semana lo tengo complicadito ultimamente ja ;)

Besotes ♥ :D ;)

Responder
Fernando QueenSpain

Pues yo debo ser el tonto del barrio porque no me sale. Lo quiero poner como la flechita fija que tienes abajo a la derecha, ya hice el truco para ponerla y al final me salio. Lo que hago es cambiar ese codigo por la actualizacion de J.Miur pero creo que no es asi. ¿como hago para que me funcione igual que a ti?, creo que lo demas lo hice bien. Un saludo.

Responder
Gem@

k_nelita ¿complicadito el fin de semana? jajajaja


yz Fernando ¿qué tonto ni que nada? si cuando algo no sale somos tontos a mi me dan un premio :)
Mira bien el primer script
<script src='http://www.google.com/jsapi'></script> porque creo que añadiste algo demás (lo que está en negrita)

Responder
Fernando QueenSpain

No vi el script de mas que dices, en el codigo tambien esta, de hecho si lo quito esta mal formada la plantilla, he probado de mil maneras y nada, tengo puesto un codigo del otro truco (ir arriba)antes de body (abajo del todo) y funciona normal pero cuando lo cambio no sale ni la flecha los he mezcldo de todas maneras y nada, ya me diras si desisto o que hago mal, si no me conformare como esta que tampoco esta mal, aunque con este truco estaba mas chulo. Gracias por contestar a los otros comentarios.

Responder
Gem@

Veamos, el script no está demás, lo que está demás es lo que te añadí en negrita (el cierre de la etiqueta)

El código donde añadimos la imagen es:
<a href="#outer-wrapper">ENLACE</a>
Mira bien porque no tienes añadido el código igual :O

Responder
Anónimo

Lo volvi a copiar y nada, que no sale. Me quedo como estoy y en paz. Mil gracias por todo.

Responder
Admin

Ja ja ja ajjjaa :D si complicaditos, ocupaditos o como quieras llamerles :D la cuestión es que me tienen lejos de la pc, pero no la extraño ehh, igual este es mi tema preferido y no dejo de hablar de todo este mundito mío ;) Tanto que le voy a enseñar a otra gente como es esto de tanto contarle ja jaaa
Pero hay momentos que no hablo juaaa, al menos de esto...

Besotes ;)

Responder
Gem@

Como tu quieras Fernando yo sigo viendo e ntu plantilla que sobra el cierre del script y omites en el enlace outer-wrapper.

¿No la extrañas la PC k_nelita? ummm algo muy poderoso llena esos momentos :) :) :)

Responder
Anónimo

Lo intentare otra vez, a ver si me sale, yo copio el codigo tal cual lo tienes pero luego al guardar se modifica, pero lo intento otra vez ya que me gusta mucho, espero tener suerte. Ya te contare.

Responder
Anónimo

Te mande un email, porque no lo consigo.

Responder
Gem@

Voy a verlo Fernando ;)

Responder
Christopher

Hola Gema me gusta mucho tu blog, recien lo encontre sabes he estado media hora cambiando codigos y no logro como hacer que el boton sea igual que el tuyo, por que en tu caso se desliza pero en mi blog de prueba solo logro que se actualize el blog, ya añadi los js pero nada, te dejo mi blog de pruebas http://thewallofchristopher.blogspot.com/
para que me ayudes en percatarme en que estoy fallando. SALUDOS y espero tu ayuda de este pobre asesino de plantillas XD...!

Responder
Gem@

Saludos Christopher, al final de la entrada da una opción por si al añadir a href= no funciona bien, prueba con a onclick=
;)

Responder
Unknown

hola, acabo de subir los scripts al skydrive y seguir todos los pasos, pero cuando intento ver el blog IE y Firefox me dicen que hay un script que pone lento el pc...que será?

y si coloco lo que nos indicas de google(para no tener que subir a un hosting) no me funciona con el efecto deslizante.



http://migueljimenezz.blogspot.com


gracias:)

Responder
Gem@

El problema no es el script MigueL es el enlace que añades, el script no reconoce la dirección a href="#abajo para ir al final del blog sino #footer-wrapper.
Al tener las dos imágenes de las flechas para cada dirección hay que añadir el efecto a las dos pero por separado, por otra parte esto no es necesario </a onclick>

Veamos yo he probado y me funciona bien de esta forma:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img src='url-imagen ir a inicio'/></a>|
<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'>| <img src='url-imagen-ir-al-final'/></a>|
<a href='mailto:migue.hit@hotmail.com'><img src='url-imagen-coorreo'/></a>|

Estuve mirando los scripts y he visto un error.. Para añadir cualquier url generada a partir de subir un archivo a SkyDrive debes suprimir la parte final donde dice ?download
En tu plantilla lo tienes así en el script de bloques animados. El añadido sobre Dynamic Drive puedes suprimirlo de esa parte y dejarlo así:<script src='url-archivo.js' type='text/javascript'></script>

Responder
Unknown

hola Gem@, muchas gracias por tu ayuda...pero no pude hacerlo por mi mismo :(

aunque mira este post donde nos dan los archivos ya subidos a un hosting, y lo mejor es que funciona!!:)

http://internetuide.blogspot.com/2009/01/efecto-easing-para-ir-inicio.html

Responder
Gem@

ΜigueŁ jίмenez™ de esa forma tenía yo hace tiempo los archivos proporcionando la url pero a la larga eso no es conveniente, porque cuando son muchas personas las que utilizan la url se supera la banda ancha permitida y los scripts dejan de funcionar viéndonos obligados entonces a alojar de nuevo los archivos y en muchos casos buscando un nuevo alojamiento.
El perjudicado no sólo es la persona que proporciona el script sino quien lo añade a su blog porque cuando al autor le deje de funcionar o cambie la url de sitio también dejará de funcionarte a ti.
Por eso es recomendable descargarse el archivo y alojarlo nosotros mismos es la única forma que garantiza un buen funcionamiento ;)

Responder
Nicar

Hola Gema. Hace 1 hora que mande un comentario para preguntarte un pequeño problema que tenía para alinear la imagen, con el texto, en el footer. El comentario no se publicó (mejor porque era un rollo) y el problema que tenía ya lo solucione con: style="vertical-align:bottom.
Gracias por las explicaciones tan claras que das.

Responder
Gem@

yz Vi el resultado NKR :)

Responder
Pucho

Me encanta este efecto, pero no me funciona. Hago todo al pie de la letra y nada...o sea va arriba, pero sin el efecto. Yo no le pongo #outer-wrapper por que me va al panel de blogger. De todos modos le pongo un enlace #header. Sabes por que me puede estar pasando? Gracias

Responder
Pucho

:O Esta loca mi pagina. No basto que venga a comentarte, que me empezo a funcionar. Estuve probando una y mil veces...y nada. Comente, y me empezo a funcionar...jaja. Disculpame. Parezco un loco.

Responder
Gem@

yz Eso es como a los niños Pucho se les quita todo nada más llegar al médico :)

Responder
Voodoo

Excelente post, un efecto muy bonito y fácil de aplicar salvo por una duda que tengo.

Me gustaría añadir dos imágenes flotantes abajo a la derecha; una para subir y otra para bajar.
El problema es que si uso "bottom:0" aparecen montadas una sobre la otra, y si en una uso "top:0" aparece arriba de la página.
A ver si me puedes ayudar, si es posible, para que ambas estén abajo pero sin montarse.

Como una imagen vale más que mil palabras, te dejo una fotito de cómo lo tengo ahora y cómo me gustaría tenerlo.

http://i43.tinypic.com/9vh7gi.jpg

Un saludo y gracias!

Responder
Gem@

yz Es posible hacerlo Voodoo, déjame mirarlo y te explico...

Responder
Gem@

yz Voodoo para hacerlo más sencillo en la siguiente entrada explico los pasos a seguir, lo probé y añadí unas flechas como las de tu imagen por cierto que las estaba buscando igual para los iconos de navegación ¿sabes de alguna para sustituir el icono de HOME?

Responder
Voodoo

Voy a echar un ojo a la entrada que me comentas a ver si me entero :D

Sobre el icono de home, lo que hice fue toquetear la misma flecha con el Photoshop de esta forma

http://img366.imageshack.us/img366/7777/flechahome.png

Responder
Voodoo
Este comentario ha sido eliminado por el autor.
Responder
Gem@

yz No, Voodoo me refería la próxima entrada la que hoy mismo le de salida. Siento si te confundí por explicarme mal.
Recibí las flechitas y me encantan ¡Gracias! las pondré hoy mismo :)

Responder
Voodoo

Jajaaaa me lo imaginé después, que sería alguna entrada venidera; estaré atento.
Me alegro de que te llegaran bien los iconos :D

Responder
Esteban

Hola Gem@, yo de nuevo :)...

Está genial el efecto y me preguntaba si conoces la forma de hacerlo en jQuery, esto porque tengo otro de tus aportes, el slideshow en jQuery y me gusta mucho, pero también quiero tener el efecto de ir al inicio, aunque en mi caso es ir al footer, donde tengo un formulario de contacto...

No puedo poner tanto protoype como jquery por incompatibilidades, por eso la pregunta...

Saludos!!

Responder
Gem@

yz Esteban precisamente comentaba sobre eso mismo en otra entrada, indicando el blog de Pizcos porque él utiliza la librería jQuery y es probable que sepa como añadir ese efecto ;)

Responder
Pablo

Hola Gema, cosa extraña la que me ha sucedido, utilice este efecto en el blog, resulta que tengo otros scripts de un slideshow que he colocado en el sidebar y el menu minislide, ni siquiera son scrips, son llamadas al archivo js

Resulta que si ubico el del slideahow después funciona éste y no el de "volver arriba", y viceversa. Habrá conflicto o que esta sucediendo?

Responder
Gem@

yz Hola Pablo, aunque lo que añades a la sidebar son llamadas los scripts debes tenerlos en la plantilla, son distintas librerías y eso crea conflictos.
Puedes hacer lo mismo pero sin efecto deslizante ;)

Responder
Alfonso

Hola Gema, antes que nada decirte que tu blog me parece muy didáctico, y por tanto, de gran ayuda para la gente como yo que recién comenzamos. Por ello, mil gracias.
He visto en algún sitio un efecto que me ha parecido muy bonito, y consiste en que al hacer "click" en la imagen que te lleva arriba el efecto es deslizante como aquí indicas, pero esa imagen al llegar arriba desaparece. No sé si conoces este efecto y cómo lo podría implementar.
Un saludo, y mil gracias!!!

Responder
Gem@

yz Hola Alfonso ese efecto que dices está creado con jQuery y puedes verlo en el blog de Pizcos, si no recuerdo mal hace poco explicaba en una entrada como hacerlo..

http://humanossinsentido.blogspot.com/

Suerte ;)

Responder
Admin

Gemit@ otra vez con líos, estoy tratando de poner esto que ya tenía antes en Te Propongo y desapareció con la vieja plantilla, de cualquier menera nunca hizo efecto deslizante, se iba para arriba como un cohete ja ja :D

Ahora estoy tratando de ponerlo en la nueva plantilla, que ya sabes es la Minima, (Te Propongo) ya hice todo, pero no sabía donde poner lo último que agregó JMiur, y leyendo los comentarios vi que antes lo había puesto en un elemento de página, entonces hice eso... y que crees? ja jaaa :D

Allí está la imagen quietecita ja ja, si la pinchas sube a la velocidad de la luz ja ja no puedo parar de reirme sola... pero ella no sube, se queda ahí mismo abajo en la sidebar, pero no la vayas a tocar ehh porque te lleva como loca al inicio jajaja jaa, te lo cuento y estoy llorando de la risa :D :D

Sube pero el efecto deslizante vaya una a saber donde lo dejó ja ja iba muuuuy apurada ja jaaa :D :D

A ver que hacemos con esto, por Dios que me parto de la risa :) :D :P

Responder
Gem@

yz k_nelita este efecto funciona que a más distancia en llegar a inicio más se puede visualizar el efecto deslizante, a menor distancia más rapidez y menos efecto.
Tiene mucho que ver la cantidad de entradas que hay en la página principal.
Hazlo de la siguiente forma omitiendo el código de "bajar"
http://gemablog-.blogspot.com/2009/04/subir-y-bajar-con-efecto-deslizante.html

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top